<!--
头部组件
v3.0.3 取消leftevent字段，增加close事件监控
v3.0.2 取消fixed定位
v3.0.1 支持状态栏样式
v3.0.0 兼容iphoneX
-->
<template>
  <!--兼容iphoneX-->
  <header v-if="!is_weixin"
          :class="{'ios':is_ios,'iphoneX':is_iphoneX,'black':barStyle=='black','tran':cIsHeaderTransparent}">
    <div class="header_inner">
      <div class="header_ios_top">
      </div>
      <div class="header_main">
        <div class="left">
          <div class="text_mod" v-if="cLeftText!=null"
               @tap="leftEvent()">
            {{cLeftText}}
          </div>
          <div class="arrow_mod"
               @tap="leftEvent()"
               v-if="cLeftText==null">
            <span class="arrow_left"></span>
          </div>
          <div class="across_mod"
               @tap="close()">
            <span class="across"></span>
          </div>
        </div>
        <div class="title">
          {{cTitle ? cTitle : ''}}
        </div>
        <div @tap="rightEvent()"
             class="right">
          <template v-if="cRightText!=null">
            <div class="img_mod" v-if="cRightText in iconData">
              <img :src="iconData[cRightText]" alt=""
                   :style="(cRightText=='ICON_SERVICE'?'height:1.075rem':'')">
            </div>
            <div class="text_mod" v-if="!(cRightText in iconData)">
              {{cRightText}}
            </div>
          </template>

          <!--<div class="across_mod" v-if="cRightText==null">
            <span class="across"></span>
          </div>-->
        </div>
      </div>
    </div>
  </header>
</template>

<style>
  /*头部*/
  header {
    height: 2.35rem;
    width: 100%;
    z-index: 9999;
  }

  header * {
    font-size: 0.75rem !important;

  }

  header.ios {
    height: 3.35rem;
  }

  header.iphoneX {
    height: 3.85rem;
  }

  header > .header_inner {
    /*position: fixed;*/
    background: #fff;
    color: #222;
    width: 100%;
    z-index: 9999;
    box-sizing: border-box;
    /*top: 0;*/
    /*left: 0;*/
    /*-webkit-transform: translate3d(0, 0, 0);*/
  }

  header > .header_inner > .header_main {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  /*header.ios > .header_inner {
      padding-top: 1rem;
  }
  header.iphoneX > .header_inner{
      padding-top: 1.5rem;
  }*/
  header .header_ios_top {
    width: 100%;
    display: none;
  }

  header.ios .header_ios_top {
    height: 1rem;
    display: block;
  }

  header.iphoneX .header_ios_top {
    height: 1.5rem;
    display: block;
  }

  header .header_inner > .header_main > .left {
    flex: 1;
    -webkit-flex: 1;
    height: 2.35rem;
    line-height: 2.35rem;
    /*padding-left: 1rem;*/
    display: flex;
    display: -webkit-flex;
    text-align: center;
  }

  header .header_inner > .header_main > .left > .text_mod {
    flex: 0.6;
    -webkit-flex: 0.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
  }

  header .header_inner > .header_main > .left > .arrow_mod {
    flex: 0.6;
    -webkit-flex: 0.6;
    max-width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  header .header_inner > .header_main > .left > .across_mod {
    flex: 0.4;
    -webkit-flex: 0.4;
    max-width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  header .header_inner > .header_main > .title {
    flex: 2.5;
    -webkit-flex: 2.5;
    text-align: center;
    /*font-weight: bold;*/
    font-size: 0.9rem !important;
    height: 2.35rem;
    line-height: 2.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55.556%;
  }

  header .header_inner > .header_main > .right {
    flex: 1;
    -webkit-flex: 1;
    /*padding-right: 1rem;*/
    height: 2.35rem;
    line-height: 2.35rem;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: flex-end;
    max-width: 22.222%;
  }

  header .header_inner > .header_main > .right > .img_mod {
    flex: 1;
    -webkit-flex: 1;
    overflow: hidden;
    text-align: right;
    padding-right: 1rem;
  }

  header .header_inner > .header_main > .right > .img_mod > img {
    height: 0.85rem;
    vertical-align: middle;
  }

  header .header_inner > .header_main > .right > .text_mod {
    flex: 1;
    -webkit-flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  header .header_inner > .header_main > .right > .across_mod {
    flex: 0.6;
    -webkit-flex: 0.6;
    max-width: 60%;
  }

  .arrow_left {
    border-top: 2px solid #222;
    border-left: 2px solid #222;
    height: 0.5rem;
    width: 0.5rem;
    display: inline-block;
    transform: rotate(-45deg);

  }

  .arrow_left:active {
    opacity: 0.5;
  }

  .across {
    height: 0.8rem;
    width: 0.8rem;
    display: inline-block;
    position: relative;
  }

  .across:before, .across:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 2px;
    background: #222;
    display: inline-block;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .across:before {
    transform: rotate(-45deg);
  }

  .across:after {
    transform: rotate(45deg);
  }

  .across:active {
    opacity: 0.5;
  }

  header.black > .header_inner {
    background-color: #646464;
    color: #d0d0d0;
  }

  header.black > .header_inner .arrow_left {
    border-color: #d0d0d0;
  }

  header.black .across:before, header.black .across:after {
    background: #d0d0d0;
  }

  header.tran > .header_inner {
    background: transparent;
  }

  .text_mod:active {
    opacity: 0.5;
  }
</style>

<script>
  var h_utils = {
    //移动端环境判断
    ua: navigator.userAgent,
    //微信
    isWeixin: function () {
      return this.ua.match(/MicroMessenger/i);
    },
    //ios
    isIos: function () {
      return !!this.ua.match(/iPhone|iPod|iPad/i);
    },
    //安卓
    isAndroid: function () {
      return !!this.ua.match(/Android/i);
    },
    //iphoneX
    isIphoneX: function () {
      if (this.isIos()) {
        return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375);
      } else {
        return false;
      }
    },
    //执行指令
    goToApp: function (cmd, param) {
      var _self = this;
      /*if (cmd == 'closeWebView') {
        _self.goToApp('setStatusBarStyle', 'style==0');
      }*/
      //跟app的交互
      setTimeout(function () {
        if (_self.isAndroid()) {
          console.log('执行安卓指令:' + cmd + ':' + param);
          window.JavaScriptHelper ? window.JavaScriptHelper.sendCommand(cmd, param) : ''; // java接口调用
        } else if (_self.isIos()) {
          console.log('执行IOS指令:' + cmd + ':' + param);
          window.location = cmd + ":" + param;
        }
      }, 300);
    },
    /**
     * 兼容性获取滚动条到顶部的距离
     * @returns {number|Number}
     */
    getScrollTop: function () {
      return document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    },
  };

  export default {
    name: 'sh-header',
    props: {
      hideBack: Boolean,//是否隐藏返回按钮
      hideClose: Boolean,//是否隐藏关闭按钮
      leftText: String,//左侧文字
      title: String,//标题
      rightText: String,//右侧文字
//            left_event:Function,
//            right_event:Function,
      barStyle: String,//非必填，值：white
      isTransparent: Boolean,//非必填，是否透明
    },
    data() {
      return {
        token: '',
        cTitle: '',
        cLeftText: '',
        cRightText: '',
        is_weixin: h_utils.isWeixin(),
        is_ios: h_utils.isIos(),
        is_iphoneX: h_utils.isIphoneX(),
        is_scrolling: false,
        cIsHeaderTransparent: false,
        iconData: {
          ICON_PHONE: "",
          ICON_SERVICE: "",
        }
      }
    },
    mounted: function () {
//      console.log(this._events);
      this.cTitle = this.title;
      this.cLeftText = this.leftText;
      this.cRightText = this.rightText;
      this.cIsHeaderTransparent = this.isTransparent;
      if (this.isTransparent) {
        window.onscroll = () => {
          if (h_utils.getScrollTop() > 10) {
            this.cIsHeaderTransparent = false;
          } else {
            this.cIsHeaderTransparent = true;
          }
        };
      } else {
        window.onscroll = null;
      }
    },
    methods: {
      leftEvent: function () {
        if ("left" in this._events) {
          this.$emit('left');
        } else {
          this.toBack();
        }
      },
      rightEvent: function () {
        this.$emit('right');
      },
      toBack: function () {
        /*alert(document.referrer);
        if(document.referrer==''){//判断有没有上一页
            this.close();
        }else{
            window.history.back();
        }*/
        if (this.$router && this.$router.goBack) {
          this.$router.goBack();
        } else {
          window.history.back();
        }
      },
      close: function () {
        if ("close" in this._events) {
          this.$emit('close');
        } else {
          h_utils.goToApp('closeWebView', '-1');
        }
      },
    },
    watch: {
      isTransparent(val) {
        this.cIsHeaderTransparent = val;
        if (this.is_transparent) {
          window.onscroll = () => {
            if (h_utils.getScrollTop() > 10) {
              this.cIsHeaderTransparent = false;
            } else {
              this.cIsHeaderTransparent = true;
            }
          };
        } else {
          window.onscroll = null;
        }
      },
      title(val) {
        this.cTitle = val;
      },
      leftText(val) {
        this.cLeftText = val;
      },
      rightText(val) {
        this.cRightText = val;
      },
    }
  };
</script>
